<template>
  <div class="home">
    <my-head title="喵咪食物"></my-head>
    <router-link class="search-box" to="/search" tag="div">搜索商品</router-link>
    <van-tabs v-model="active" @click="tabClick">
      <van-tab title="全部"></van-tab>
      <van-tab v-for="item in types" :key="item._id" :title="item.title"></van-tab>
    </van-tabs>
    <div>
      <van-divider />
      <div class="sort_box">
        <section>综合</section>
        <section>
          <span class="price-sort" @click="sortPrice">价格 <i class="iconfont icon-shang" :class="{red: state === 1}"></i><i class="iconfont icon-xia" :class="{red: state === 2}"></i> </span>
        </section>
        <section>
          <span>销量<i class="iconfont icon-xia"></i></span>
        </section>
      </div>
      <van-divider />
    </div>

    <van-grid :column-num="2">
      <van-grid-item class="item_box" v-for="item in list" :key="item._id" @click="itemClick(item._id)">
        <van-image lazy-load :src="item.pic"/>
        <p>{{item.title}}</p>
        <section class="sale-info">
          <span>
            <em class="rmb-icon">￥</em>
            <em class="now-price">{{item.price}}</em>
            <del class="old-price">{{item.old_price}}</del>
          </span>
          <span class="has-saled">已售：14件</span>
        </section>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import head from '@/components/head'
import { getTypes, getLists } from '../utils/api'
import Vue from 'vue';
import { Lazyload } from 'vant'
Vue.use(Lazyload);
export default {
  name: 'Home',
  components: {
    myHead: head
  },
  data() {
    return {
      active: 0,
      types: [],
      list: [],
      // 价格排序状态 0表示默认排序 1表示升序 2 表示降序
      state: 0,
      originList: [],
      typeList: []
    }
  },
  created() {
    // 获取导航数据
    getTypes().then(res => {
      this.types = res.result
    })
    // 默认获取全部商品数据
    getLists().then(res => {
      this.list = res.result
      // 存储原始数据
      this.originList = JSON.stringify(res.result)
    })
  },
  methods:{
    // 点击单个商品进入商品详情页
    itemClick(id) {
      this.$router.push({
        name: "Detail",
        query: {
          id
        }
      })
    },

    // 点击tab切换数据
    tabClick(ind) {
      // 获取原始数据 方便过滤
      var arr = JSON.parse(this.originList)
      if(ind === 0) {
        this.list = JSON.parse(this.originList)
      } else {
        this.list = arr.filter((item) => {
          return item.cid == this.types[ind - 1]._id
        })
        this.typeList = JSON.stringify(this.list)
      }
    },
    // 价格排序
    sortPrice() {
      if(this.state === 0) {
        this.state = 1
      } else if(this.state === 1) {
        this.state = 2
      } else {
        this.state = 0
        if(this.active === 0) {
          this.list = JSON.parse(this.originList) 
        } else {
          this.list = JSON.parse(this.typeList) 
        }
        return
      }
      this.sortFn(this.state)
    },

    // 排序逻辑
    sortFn(state) {
      this.list.sort((item1, item2) => {
        if(state === 1) {
          return item1.price*1 - item2.price*1
        } else if(state === 2) {
          return item2.price*1 - item1.price*1
        }
      })
    }
  },

  watch: {
    $route(to, from) {
      console.log(to, from)
    }
  }
}
</script>
<style lang="scss" scoped>
  .sort_box{
    display: flex;
    justify-content: space-between;
    padding: 0 .3rem;
    font-size: .24rem;
    section {
      font-size: .24rem;
      .price-sort{
        position: relative;
        i{
          position: absolute;
          left: .6rem;
        }

        .icon-shang{
          top: -5px;
        }

        .icon-xia{
          bottom: -5px;
        }

        .red{
          color: red;
        }
      }
    }
  }

  .item_box{
    font-size: .32rem;
    img{
      width: 100%;
    }

    p{
      font-size: .26rem;
      margin-top: .3rem;
      text-align: left;
      width: 100%;
      line-height: .4rem;
    }
  }
  .sale-info{
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: .26rem;
    line-height: .6rem;
    color: coral;
    .has-saled{
      color: #888;
    }
    .old-price{
      color: #888;
      margin-left: .1rem;
    }
    .now-price{
      font-size: .36rem;
    }
  }

  .search-box{
    width: 80%;
    margin-left: 10%;
    line-height: .6rem;
    background-color: #f6f6f6;
    color: #ccc;
    font-size: .28rem;
    text-align: center;
    border-radius: .6rem;
  }
</style>
